<template>
  <div class="page">
    <el-tabs ref="distributorManageTabs" v-model="activeName" class="ledger-content" type="card">
      <el-tab-pane v-if="$hasTabPermission(50101)" label="配送员管理" name="distributor">
        <distributor />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(50102)" label="配送员定位" name="distributorPosition">
        <distributorPosition />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(50103)" label="配送轨迹" name="distributionTrack">
        <distributionTrack />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

  <script>
  import distributor from '../distributor'
  import distributorPosition from '../distributorPosition'
  import distributionTrack from '../distributionTrack'
  export default {
    name: 'distributorManage',
    components: {
      distributor,
      distributorPosition,
      distributionTrack
    },
    data() {
      return {
        activeName: 'distributorPosition'
      }
    },
    mounted() {
      this.activeName = this.$refs.distributorManageTabs.panes.length > 0 ? this.$refs.distributorManageTabs.panes[0].name : ''
    }
  }
  </script>

<style lang="scss" scoped>
.page {
  height: 100%;
  .ledger-content {
    height: calc(100% - 10px);
    /deep/ .el-tabs__content {
      height: calc(100% - 50px);
    }
    /deep/ .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
